<template>
  <view class="my-chart">
    <view class="chart">
      <canvas
        disable-scroll="true"
        canvas-id="daycanvas"
        id="daycanvas"
        class="charts"
        :width="cWidth * pixelRatio"
        :height="cHeight * pixelRatio"
        @touchstart="touchLine"
        @touchmove="moveLine"
        @touchend="touchEndLine"
        :style="{ width: cWidth + 'px', height: cHeight + 'px' }"
      ></canvas>
    </view>
    <view class="statistics">
      <view v-for="(item, index) in list" :key="index" class="item">
        <text>{{ item.value }}</text
        ><text>{{ item.unit }}</text>
        <view class="title">{{ item.title }}</view>
        <view class="label" v-if="item.label">{{ item.label }}</view>
      </view>
    </view>
  </view>
</template>

<script>
import uCharts from "@/components/u-charts/u-charts.js";
var canvaLine = null;
export default {
  name: "my-chart",
  components: {},
  data() {
    return {
      cWidth: 0,
      cHeight: 0,
      pixelRatio: 1,
      list: [
        { title: "正常血压次数", value: 0, unit: "次" },
        { title: "异常血压次数", value: 0, unit: "次" },
        { title: "收缩压最高值", value: 0, unit: "mmHg", label: "" },
        { title: "舒张压最高值", value: 0, unit: "mmHg", label: "" },
        { title: "血压平均值", value: 0, unit: "mmHg" },
        { title: "脉压差平均值", value: 0, unit: "mmHg" },
      ],
    };
  },
  created() {
    this.cWidth = uni.upx2px(750);
    this.cHeight = uni.upx2px(500);
  },
  methods: {
    init(date, patientId) {
      this.$api
        .doctorBloodPressureTestTrendChart({
          patientId,
          startDate: date[0],
          endDate: date[1],
        })
        .then((res) => {
          uni.stopPullDownRefresh();
          if (res.code == 200) {
            if (res.data.list) {
              this.list[0].value = res.data.normalNum;
              this.list[1].value = res.data.abnormalNum;
              this.list[2].value = res.data.sbpHighestVal;
              this.list[2].label = res.data.sbpBloodPressureLevel;
              this.list[3].value = res.data.dbpHighestVal;
              this.list[3].label = res.data.dbpBloodPressureLevel;
              this.list[4].value = res.data.bloodPressureAverage;
              this.list[5].value = res.data.pulsePressureAverage;

              let categories = [],
                series = [
                  {
                    name: "收缩压",
                    data: [],
                    color: "#B070EC",
                  },
                  {
                    name: "舒张压",
                    data: [],
                    color: "#4AB6F6",
                  },
                ];
              res.data.list.forEach((item) => {
                if (new Date(item.testDate.replace(/-/g, "/")).getFullYear() == new Date().getFullYear()) {
                  item.testDate = item.testDate.substring(5, 16);
                } else {
                  item.testDate = item.testDate.substring(0, 16);
                }
                categories.push(item.testDate);
                series[0].data.push(item.sbp);
                series[1].data.push(item.dbp);
              });
              this.showLine("daycanvas", { categories, series });
            }
          }
        });
    },
    showLine(daycanvasId, chartData) {
      canvaLine = new uCharts({
        $this: this,
        canvasId: daycanvasId,
        type: "line",
        fontSize: 13,
        dataPointShape: true,
        background: "#FFFFFF",
        pixelRatio: this.pixelRatio,
        categories: chartData.categories,
        series: chartData.series,
        enableScroll: true, //开启图表拖拽功能
        dataLabel: false,
        animation: true,
        xAxis: {
          disabled: true,
          disableGrid: true,
          type: "grid",
          gridType: "dash",
          itemCount: 8,
          scrollShow: true,
          scrollAlign: "left",
          scrollBackgroundColor: "#F7F7FF",
          scrollColor: "#DEE7F7",
        },
        yAxis: {
          gridType: "dash",
          gridColor: "#CCCCCC",
          dashLength: 8,
          data: [
            {
              format: (val) => {
                return val.toString().indexOf(".") > -1 ? val.toFixed(2) : val;
              },
            },
          ],
        },
        width: this.cWidth * this.pixelRatio,
        height: this.cHeight * this.pixelRatio,
        extra: {
          line: {
            type: "curve",
            width: 2,
          },
        },
      });
    },
    touchLine(e) {
      canvaLine.touchLegend(e); //隐藏显示某一项
      canvaLine.scrollStart(e);
    },
    moveLine(e) {
      canvaLine.scroll(e);
    },
    touchEndLine(e) {
      canvaLine.scrollEnd(e);
      //下面是toolTip事件，如果滚动后不需要显示，可不填写
      canvaLine.showToolTip(e, {
        format: (item, category) => {
          return `${category} ${item.name}：${item.data}`;
        },
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.my-chart {
  .chart {
    background: #fff;
  }
  .statistics {
    margin-top: 20rpx;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .item {
      background: #fff;
      width: 49.5vw;
      text-align: center;
      margin-bottom: 4rpx;
      padding: 40rpx 0;
      position: relative;
      text:first-child {
        font-size: $huge-font-size;
        font-weight: bold;
        margin-right: 10rpx;
      }
      text {
        font-size: $litte-font-size;
      }
      .title {
        font-size: $litte-font-size;
        color: $font-grey-color;
      }
      .label {
        position: absolute;
        right: 20rpx;
        top: 10rpx;
        font-size: $litte-font-size;
        color: #e83112;
      }
    }
  }
}
</style>
